<style lang="scss" scoped>

    $active_color:#14ceb0;

    $waring_color:#eb9e3e;

    $danger_color:#ce3c3e;

    .header-wrapper{
      width:1000px;
      height: auto;
      float: left;
      clear: both;
    }

    .header-img{
      width:120px;
      height:120px;
      margin:20px auto;
      border-radius: 10px;
    }

    .left-img{
      width:160px;
      height:160px;
      float: left;
      text-align: center;
    }

    .right-brand{
      padding-left: 20px;
      width:720px;
      height: 160px;
      float: left;
    }

    .project-name{
      font-size: 24px;
      font-family: '微软雅黑';
      color: black;
      margin-top: 40px;
    }

    .fontSize{
      font-size: 18px;
      height: 30px;
      line-height: 30px;
      font-family: '微软雅黑';
      display: inline-block;
      margin-top:15px;
    }

    .project-progress{
      @extend  .fontSize;
      float: left;
      margin-right: 15px;
      /*text-indent: 1em;*/
    }

    .project-responsibility{
      @extend  .fontSize;
      color: $active_color;
      float: left;
      /*margin-left: 15px;*/
    }

</style>
<template>
    <div class="header-wrapper">
      <div class="left-img">
        <img src="../../../assets/images/logo.png" alt="无法显示图片" class="header-img" />
      </div>
      <div class="right-brand">
        <div class="project-name">{{projectName}}</div>
        <span class="project-progress">{{projectSubText}}</span>
        <span class="project-responsibility">{{projectSubTitle}}</span>
      </div>
    </div>
</template>
<script>
  export default{
      name:"ProjectHeader",
      props:{
        projectName:{
          type:String,
          required:true
        },
        projectSubText:{
          type:String,
          required:true
        },
        projectSubTitle:{
          type:String,
          required:true
        }
      }
  }
</script>
